import React, {Component} from 'react';
import 'antd/dist/antd.css';
import {sleep} from '@/utils/common';
import Memery from '@/components/memerycard/index';
import Program from '@/components/programs/index';
import ProgramStatus from '@/components/programs/UI';
import {Button, Input} from 'antd'
import Imag from '../src/assets/images/turing/get110.png';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // 纸带
      list: [ -1,0, 1, 0, 1, 0, 0, 1, 1, 0 , 1, -1 ],
      // 缓存
      catch: -1,
      // 当前读头
      target: -1,
      // 当前机器状态
      status: 0,
      // 当前机器运行状态
      MStatus: 0,
      // 当前机器运行状态中文
      MStatusZH: ["读取", "写入", "滚动", "变更机器状态"],
      // 是否停机
      stop: 0,
      // 读写周期
      time: 4000,
      timeInput: "",
      // 程序指令
      program: [
        // 找到 110
        {status: 0, read: -1, insert: -2, action: 1, turn: 4},
        {status: 0, read: 0, insert: -2, action: 1, turn: 0},
        {status: 0, read: 1, insert: -2, action: 1, turn: 1},
        // 
        {status: 1, read: -1, insert: -2, action: 1, turn: 4},
        {status: 1, read: 0, insert: -2, action: 1, turn: 0},
        {status: 1, read: 1, insert: -2, action: 1, turn: 2},
        // 
        {status: 2, read: -1, insert: -2, action: 1, turn: 4},
        {status: 2, read: 0, insert: -2, action: 1, turn: 3},
        {status: 2, read: 1, insert: -2, action: 1, turn: 0},
        // return true
        {status: 3, read: -1, insert: -2, action: 0, turn: 0},
        {status: 3, read: 0, insert: -2, action: 0, turn: 0},
        {status: 3, read: 1, insert: -2, action: 0, turn: 0},
        // return false
        {status: 4, read: -1, insert: -2, action: 0, turn: 0},
        {status: 4, read: 0, insert: -2, action: 0, turn: 0},
        {status: 4, read: 1, insert: -2, action: 0, turn: 0},
      ],
      // 当前执行的程序指令
      programNow: ""
    };
  }
  componentDidMount() {
    // this.start();
  }
  render() {
    return (
      <div style={{marginTop: "20px", paddingLeft: "40px", paddingRight: "40px"}}>
        <Button onClick={this.start}>{`start`}</Button>
        <Button onClick={this.stop}>{`stop`}</Button>
        <Button onClick={() => {this.setState({target: -1})}}>{`重置读写头`}</Button>
        
        <div>
          <Input value={this.state.timeInput} placeholder="输入新的 时间周期（毫秒）" onChange={this.changeTime}/>
          <Button onClick={this.saveTime}>更新时间周期</Button>

        </div>
        <div> 开机状态 ：： {this.state.stop ? '开' : '关'}</div>
        <div> 读写头状态 ：： {this.state.status}</div>
        <div> catch值 ：： {this.state.catch === -1 ? '' : this.state.catch}</div>
        
        <div> 程序运行状态 ：： {this.state.stop ? this.state.MStatusZH[this.state.MStatus] : "待机"}</div>
        
        <Memery
          list={this.state.list}
          target={this.state.target}
        />
        <div style={{marginTop: "20px"}}>
          当前执行的程序指令 :: {this.state.programNow}
        </div>
        <div style={{marginTop: "20px"}}>
          示意图 ::
          <a href="https://www.bilibili.com/video/BV1mK4y1v7MD?from=search&seid=4967015920904304612" rel="noreferrer" target="_blank">
            <img src={Imag} alt="点击跳转图片来源" />
          </a>
        </div>
        <div style={{display: "flex"}}>
          <div style={{flex: "1"}}>
            <Program setCode={this.setCode} setProgram={this.setProgram} />
          </div>
          <div style={{flex: "1"}}>
            <ProgramStatus data={this.state.program} />
          </div>
        </div>
      </div>
    )
  }
  saveTime = () => {this.setState({time: Number(this.state.timeInput)})}
  changeTime = data => {this.setState({timeInput: data.target.value})}
  /** 输入代码 ----start */
  setCode = data => {console.log(data);this.setState({list: data})}
  setProgram = data => {this.setState({program: data})}
  /** 输入代码 ----over */
  /** 装饰代码 ----start */
  getCNProgram = data => {
    let str = "";
    if (data.action === 1) str = "向右移动一步";
    if (data.action === -1) str = "向左移动一步";
    if (data.action === 0) str = "保持不动";
    let str1 = data.read;
    if (data.read !== 1 && data.read !== 0) str1 = `空白！`
    return `当前读写头状态为：${data.status}， 读取的值为：${str1}，即将写入${data.insert}，并${str}，同时设置读写头状态为${data.turn}`
  }
  /** 装饰代码 ----over */
  /** 控制代码 ----start */
  start = async () => {
    if (this.state.stop) return;
    // await this.changeTarget(1);
    await this.setStateAsync({stop: 1, target: 1})
    this.ctrl_init();
  }
  stop = () => {
    this.setStateAsync({stop: 0})
  }
  ctrl_init = async () => {
    if (!this.state.stop) return;
    // 当前机器状态
    let status = this.state.status;
    // 当前机器读取头停留位置的值
    let value = this.state.list[this.state.target];
    // 程序指令
    let arr = this.state.program;
    let flag = 1;
    arr.forEach( async ele => {
      if (status === ele.status && value === ele.read) {
        flag = 0;
        await this.setStateAsync({programNow: this.getCNProgram(ele)});
        await this.ctrl_pro(ele);
      }
    });
    if (flag) this.stop();
  }
  ctrl_pro = async (ele) => {
    
    let time = this.state.time;
    await this.setStateAsync({MStatus: 0, catch: ele.read});
    console.log(0);
    await sleep(time/4);
    
    
    if (ele.insert !== -2) await this.setBlockState(ele.insert);
    await this.setStateAsync({MStatus: 1});
    console.log(1);
    await sleep(time/4);
    
    if (ele.action) await this.changeTarget(ele.action)
    await this.setStateAsync({MStatus: 2});
    console.log(2);
    await sleep(time/4);
    
    await this.changeStatus(ele.turn)
    await this.setStateAsync({MStatus: 3});
    console.log(3);
    await sleep(time/4);

    if (!ele.action) return await this.stop();
    // return;
    return await this.ctrl_init();;
  }

  
  /** 控制代码 ----over */
  /** 功能代码 ----start */
  setBlockState = async val => {
    let list = this.state.list;
    list[this.state.target] = val;
    await this.setStateAsync({list});
  }
  changeTarget = async val => {
    await this.setStateAsync({target: this.state.target + val});
  }
  
  changeStatus = async val => {
    await this.setStateAsync({status: val})
  }
  changeList = async () => {
    let list = this.state.list;
    let st = list.splice(0, 1);
    list = [...list, ...st];
    await this.setStateAsync({list});
  }
  /** 功能代码 ----over */
  setStateAsync(state) {
    return new Promise((resolve) => {
      this.setState(state, resolve)
    });
  }
}

export default App;